<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<style type="text/css">
			body,h2,p,input{
				margin:0;
				padding:0;
				border:0;
			}
			body{
				font-family:"microsoft yahei"; 
				font-size:14px;
			}
			a{
				color:#999;
				text-decoration: none;
			}
			header{
				width: 1030px;
				height: 50px;
				margin: 0 auto;
			}
			header .hlert {
				float: left;
				width:128px;
				height: 70px;
			}
			header .hright {
				float: right;
				height: 70px;
				line-height:70px;
				background: url(../images/inf.jpg) no-repeat left center;
			}
			header .hright a {padding-left: 35px}
			#mainregister{
				width:100%;
				height:600px;
				background-color: #ddf0ea;
			}
			.registerbg{
				width: 1030px;
				height: 600px;
				background:url(../images/registerbg.jpg);
				margin: 0 auto;
				box-sizing: border-box;
				padding:140px 0 0 600px;
			}
			.registerf{	 /*表单的样式*/
				width:350px;
				height: 450px;
				padding: 0px 30px;
				background: #f5f8fd;
				border-radius: 20px;  /*设置圆角半径*/
				border: 1px solid #4faccb;
				padding-top:5px;
			}
			.registerf p{margin-top:20px;}
			.username,.password,.phone,.QQ,.email,.weixin,.pnum{  /*文本框设置相同的宽度、高度等属性*/
				width: 320px;
				height:20px;
				border: 1px solid #38a1bf;
				border-radius:3px;
				padding: 2px 2px 2px 26px;
			}
			.username {  /*设置第一个文本框的背景*/
				background: url(../images/1-1.jpg) no-repeat 5px center #FFF;
			}
			.phone {background: url(../images/phone.jpg) no-repeat 5px center #FFF}
			.QQ {background: url(../images/phone.jpg) no-repeat 5px center #FFF}
			.weixin {background: url(../images/phone.jpg) no-repeat 5px center #FFF}
			.email {background: url(../images/phone.jpg) no-repeat 5px center #FFF}
			.pnum{background: url(../images/eml.jpg) no-repeat 5px center #FFF;}
			.password {  /*设置第二个文本框的背景*/
				background: url(../images/2-2.jpg) no-repeat 5px center #FFF;
			}
			.btn {	/*设置按钮的样式*/	
				width: 350px;
				height: 40px;
				border: 1px solid #6b5d50;
				border-radius: 3px;
				background: #3bb7ea;
				font-size: 20px;
				color: white;
			}
			.log {color: #666;}
			.log a{color: #236e8c;}
			.copyright {
				width:100%;
				height:60px;
				background: #333333;
				text-align: center;
			}
			.copyright a{line-height: 60px;}
		</style>
	</head>
	<body>
		<header>
			<div class="hleft"><a href="index.html"><img src="images/logoblue.jpg" alt=""></a></div>
			<div class="hright"><a href="index.html">回首页查看商品信息</a></div>
		</header>
		<div id="mainregister">
			<div class="registerbg">
				<form class="registerf" action="/FirstWeb/Register.do" method="get" autoconplete="on">
					<span><h2>手机号注册 | QQ号注册 | 微信号注册</h2></span>
					<p>
						<input name="username" type="text" class="username" placeholder="用户名">
					</p>
					<p>
						<input name="password" type="password" class="password" placeholder="密码">
					</p>
					<p>
						<input name="password" type="password" class="password" placeholder="再次输入密码">
					</p>
					<p>
						<input name="QQ" type="text" class="QQ" placeholder="QQ号">
					</p>
					<p>
						<input name="weixin" type="text" class="weixin" placeholder="微信号">
					</p>
					<p>
						<input name="email" type="text" class="email" placeholder="邮箱">
					</p>
					<p>
						<input name="pnum" type="text" class="pnum" placeholder="验证码">
					</p>
					<p>
						<input name="btnreg" type="submit" value="注册" class="btn">
					</p>
					<p class="log">
						已经有账号? &nbsp;<a href="login.html">直接登录</a>
					</p>
				</form>
			</div>
		</div>
		<div class="copyright"> <a href="#">$友情链接$</a> </div>
	</body>
</html>	